<template>
    <div class="order">
        <div class="box">
            <!-- 订单头部 -->
            <div class="order-header">
                <p>
                    <i class="el-icon-arrow-left" @click="goBack"></i>
                    订单列表
                </p>
            </div>
            <!-- 标签页 -->
            <div class="order-list">
                <ul>
                    <li class="ulactive">全部</li>
                    <li>待付款</li>
                    <li>待发货</li>
                    <li>待收货</li>
                    <li>待评价</li>
                </ul>
            </div>
            <!-- 搜索 -->
            <div class="search">
                <input placeholder="搜索全部订单"/>
                <a>搜索</a>
            </div>
            <!-- 切换的内容 -->
            <div class="order-show">
                
            </div>
      <router-view></router-view>
        </div>  
        
    </div>
    
</template>

<script>
export default {
    data(){
        return{
            idarr:[
                {name:"/shopCar/order/all"},
                {name:"/shopCar/order/pay"},
                {name:"/shopCar/order/send"},
                {name:"/shopCar/order/receiv"},
                {name:"/shopCar/order/evaluate"},
            ],
        }
    },
    name:"order",
    methods:{
        goBack(){
        this.$router.push('/shopCar')
        },
        lists(){
            let _this = this;
            let lis = document.querySelectorAll('.order-list ul li');
            for(let i=0 ;i<lis.length;i++){
                lis[i].onclick=function(){
                    for(let j= 0 ;j<lis.length;j++){
                        lis[j].className='';
                    }
                    _this.$router.push(_this.idarr[i].name);
                    lis[i].className='ulactive';
                }
            }
        }
    },
    mounted(){
        // 切换
        this.lists();
    }
}
</script>

<style lang="scss" scoped>
.ulactive{
    border-bottom: 1px solid orangered;
    color: orangered;
}
.order{
    .box{
        .order-header{
            border-bottom: 1px solid gray;
            background-color: white;
            p{
                font-size: 30px;
                line-height: 80px;
                width: 100%;
                text-align: center;
                i{
                    float: left;
                    line-height: 80px;
                    padding-left: 20px;
                    font-size: 40px;
                }
            }
        }
        .order-list{
            width: 100%;
            background-color: white;
            span{
                width: 100%;
            }
            ul{
                li{
                    display: inline-block;
                    width: 20%;
                    text-align: center;
                    padding: 10px 0;
                }
            }
        }
        .search{
            margin: 20px 20px;
            input{
                border:none;
                outline: none;
                padding: 5px 0 5px 40px;
                border-radius: 40px;
                width: 80%;
                font-size: 14px;
            }
            a{
                background-color: orangered;
                border-radius: 40px;
                padding: 2.5px 20px;
                float: right;
                color: white;
            }
        }
        .order-show{
            ul{
                ol{
                    display: none;
                }
            }
        }
    }
    
}
</style>